<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2key的原理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>遍历数组</h1>
    <button @click.once="add">添加一个老刘</button>
    <ul>
        <li v-for="(p,index) in persons">
            {{p.name}}-{{p.age}}
            <input type="text">
        </li>
    </ul>

</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            persons:[

                {id:'001',name:'张三',age:12},
                {id:'002',name:'张的',age:14},
                {id:'003',name:'张那',age:16}
            ],
            methods:{
                add(){
                    const p={id:'004',name:'老刘',age:32}
                    this.persons.push(p)
        }
    }
        }
    })

</script>
</html>